<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Gateway",
  inject: ["getNode"],

  data() {
    return {
      height: 128,
      width: 64,
      title: "Gateway",
      text: "网关"
    };
  },
  computed: {
    nodeStyle() {
      return {
        width: this.width + "px",
        height: this.height + "px"
      };
    }
  },
  mounted() {
    const node = (this as any).getNode();
    this.width = node.getSize().width;
    this.height = node.getSize().height;
    const _text = node.getAttrs().text?.text;
    if (_text) {
      this.text = _text;
    } else {
      node.attr("text/text", this.text);
    }
    node.on("change:attrs", ({ current }: any) => {
      if (current.text) {
        this.text = current.text.text;
      }
    });

    node.on("change:size", ({ current }: any) => {
      const { width, height } = current;
      this.width = width;
      this.height = height;
    });
  }
});
</script>

<template>
  <div class="c-gateway" :style="nodeStyle">
    <svg
      t="1731206427264"
      class="c-gateway__svg"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="1148"
    >
      <path
        d="M768.2304 82.944a18.89792 18.89792 0 0 1 18.85184 18.87744l-0.45056 517.74464h0.45056v124.58496h-0.91136c-0.60416 5.90848-2.11456 13.5424-4.87424 20.09088l56.34048-80.04608c20.67968-31.0272 19.82976-61.16352 19.82976-61.16352V55.36768c0-30.99648-40.4992-33.59232-40.4992-33.59232h-302.34112c-22.4-1.7152-33.59232 10.33728-33.59232 10.33728l-45.79328 52.8384a18.54976 18.54976 0 0 1 8.28928-2.01216l324.70016 0.00512zM772.7616 776.35072l2.8416-2.90816a19.7888 19.7888 0 0 1-2.1504 1.92l-0.6912 0.98816zM780.95872 764.69248c-0.90112 2.1504-1.91488 4.12672-3.072 5.85216 1.30048-1.87392 2.42176-3.99872 3.38432-6.2976l-0.31232 0.44544z"
        fill="#848484"
        p-id="1149"
      ></path>
      <path
        d="M785.96608 744.15104h-229.9136v33.47456h212.17792c1.69984 0 3.46112-0.87552 5.2224-2.26304 0.72704-0.55808 1.43872-1.18784 2.1504-1.92 0.82944-0.82944 1.58208-1.82272 2.28864-2.8928 1.16224-1.72544 2.18112-3.69664 3.07712-5.84704 2.6624-6.43072 4.22912-14.27456 4.99712-20.55168zM454.85056 97.09056c0-5.20704 4.25472-9.43616 9.43616-9.43616h283.1616c5.1712 0 9.41568 4.2496 9.41568 9.43616v320.896a9.44128 9.44128 0 0 1-9.41568 9.4464h-191.4112v192.128h230.5792l0.4608-517.74464a18.89792 18.89792 0 0 0-18.85696-18.87744h-324.7104c-2.98496 0-5.77024 0.76288-8.28928 2.01216-6.23104 3.08224-10.5728 9.46688-10.5728 16.86528v73.46176h30.19776V97.09056z m113.26976 370.944a9.48736 9.48736 0 0 1-9.45152-9.45152 9.45152 9.45152 0 0 1 18.8928 0 9.472 9.472 0 0 1-9.44128 9.45152z m75.49952 0a9.48736 9.48736 0 0 1-9.44128-9.45152 9.45664 9.45664 0 0 1 18.90304 0c0 5.1968-4.2496 9.45152-9.46176 9.45152z m75.52512 0a9.43616 9.43616 0 0 1 0-18.87232 9.4208 9.4208 0 0 1 9.4208 9.4208 9.4208 9.4208 0 0 1-9.4208 9.45152zM786.49856 737.1008v7.05024h0.57856v-124.58496h-0.4608l-0.1024 116.54656c0.01024 0.29184 0 0.64512-0.01536 0.98816z"
        fill="#464646"
        p-id="1150"
      ></path>
      <path
        d="M786.49856 744.15104v-124.58496h-230.44608v124.58496h230.10816z"
        fill="#686868"
        p-id="1151"
      ></path>
      <path
        d="M485.67808 274.10944l0.02048-18.7904-0.02048 18.7904zM756.864 417.98656V97.09056a9.46176 9.46176 0 0 0-9.41568-9.43616H464.28672a9.45664 9.45664 0 0 0-9.43616 9.43616v78.19264h60.6976s27.65824 1.8176 37.22752 19.98848h166.144c5.20192 0 9.43104 4.23936 9.43104 9.41056v32.09728a9.4464 9.4464 0 0 1-9.43104 9.43104h-162.88256v24.5504h162.88256c5.20192 0 9.43104 4.23936 9.43104 9.44128v32.08704c0 5.18656-4.25472 9.4208-9.43104 9.4208h-162.88256v24.56064h162.88256c5.20192 0 9.43104 4.224 9.43104 9.43616v32.09216a9.46176 9.46176 0 0 1-9.43104 9.43104h-162.88256v30.19776h191.4112a9.43104 9.43104 0 0 0 9.41568-9.44128z m-28.50816-256.71168a9.46176 9.46176 0 0 1-9.43104 9.43616H492.82048a9.4464 9.4464 0 0 1-9.43104-9.43616v-32.08704c0-5.1968 4.22912-9.43104 9.43104-9.43104h226.10432c5.20704 0 9.43104 4.23936 9.43104 9.43104v32.08704z"
        fill="#1E1D1D"
        p-id="1152"
      ></path>
      <path
        d="M718.9248 119.75168H492.82048a9.44128 9.44128 0 0 0-9.43104 9.43104v32.08704c0 5.1968 4.22912 9.43616 9.43104 9.43616h226.10432a9.46176 9.46176 0 0 0 9.43104-9.43616v-32.08704a9.44128 9.44128 0 0 0-9.43104-9.43104zM728.35584 236.78464v-32.09728c0-5.1712-4.224-9.41056-9.43104-9.41056h-166.144a28.5696 28.5696 0 0 1 3.27168 13.59872v37.34016h162.88256c5.16608 0 9.4208-4.21888 9.4208-9.43104zM728.35584 312.2944v-32.08704a9.4464 9.4464 0 0 0-9.43104-9.44128h-162.88256v50.94912h162.88256a9.45664 9.45664 0 0 0 9.43104-9.4208zM728.35584 387.80928v-32.09216a9.43616 9.43616 0 0 0-9.43104-9.43616h-162.88256v50.95936h162.88256a9.46688 9.46688 0 0 0 9.43104-9.43104z"
        fill="#7F7E7E"
        p-id="1153"
      ></path>
      <path
        d="M568.12032 449.16224c-5.19168 0-9.45152 4.22912-9.45152 9.4208s4.25984 9.45152 9.45152 9.45152 9.44128-4.25984 9.44128-9.45152c0-5.19168-4.2496-9.4208-9.44128-9.4208z"
        fill="#00B16A"
        p-id="1154"
      ></path>
      <path
        d="M643.61984 449.16224c-5.18144 0-9.44128 4.22912-9.44128 9.4208s4.25984 9.45152 9.44128 9.45152a9.48224 9.48224 0 0 0 9.46176-9.45152c0-5.19168-4.2496-9.4208-9.46176-9.4208z"
        fill="#F22613"
        p-id="1155"
      ></path>
      <path
        d="M719.14496 449.16224a9.43104 9.43104 0 1 0-0.01024 18.86208 9.43104 9.43104 0 0 0 0.01024-18.86208z"
        fill="#E9D460"
        p-id="1156"
      ></path>
      <path
        d="M471.33696 929.82784l2.87232-2.8928c-0.7424 0.75264-1.4848 1.40288-2.23744 1.9968l-0.63488 0.896zM476.49792 924.032c1.31072-1.88928 2.43712-4.04992 3.41504-6.37952l-0.32256 0.4608a33.86368 33.86368 0 0 1-3.09248 5.91872zM556.05248 776.53504V208.87552c0-5.3504-1.26976-9.80992-3.27168-13.59872-9.56928-18.17088-37.22752-19.98848-37.22752-19.98848h-302.336c-22.39488-1.72032-33.59744 10.33216-33.59744 10.33216l-45.78816 52.8384a18.5088 18.5088 0 0 1 8.29952-2.01728h324.7104a18.90816 18.90816 0 0 1 18.86208 18.88256l-0.01536 18.78528-0.04096 44.22656-0.03584 31.36-0.03584 44.07296-0.03072 33.664-0.02048 25.00096-0.01024 12.30848-0.13824 154.81856-0.10752 124.58496-0.0256 28.90752h0.4608v124.59008h-0.93184c-0.60928 5.888-2.11456 13.48608-4.84864 20.00896l56.30976-79.94368c18.44736-27.66848 19.74784-54.5536 19.81952-60.07808v-1.09568z"
        fill="#848484"
        p-id="1157"
      ></path>
      <path
        d="M484.56704 897.6384H123.25376v14.61248a18.89792 18.89792 0 0 0 18.87232 18.85696h324.7104c1.67936 0 3.41504-0.83968 5.13536-2.18112a18.96448 18.96448 0 0 0 4.52608-4.89984c1.16736-1.7408 2.19648-3.7376 3.09248-5.91872 2.65216-6.42048 4.224-14.208 4.97664-20.46976zM485.11488 773.04832v4.57728h0.11776l-0.1024 111.9744-0.01536 0.86528v7.17312h0.58368v-124.59008h-0.4608l0.0256-28.90752 0.11264-124.58496 0.13824-154.81856 0.01024-12.30848 0.02048-25.00096 0.03072-33.664 0.03584-44.07296 0.0256-31.36512 0.04096-44.22656 0.01536-18.78528a18.90816 18.90816 0 0 0-18.86208-18.88256h-324.7104c-2.99008 0-5.78048 0.76288-8.29952 2.01728a18.85184 18.85184 0 0 0-10.5728 16.86528v517.72928h361.86624z m-331.66336-201.56928V250.58304c0-5.1968 4.25472-9.42592 9.44128-9.42592h283.15648a9.472 9.472 0 0 1 9.4208 9.42592v320.896a9.45152 9.45152 0 0 1-9.4208 9.45664H162.8928a9.472 9.472 0 0 1-9.44128-9.45664z m37.76 50.06336a9.4464 9.4464 0 0 1 0-18.88768 9.4464 9.4464 0 0 1 0 18.88768z m75.51488 0a9.45664 9.45664 0 0 1-9.44128-9.45664c0-5.19168 4.2496-9.43104 9.44128-9.43104a9.4464 9.4464 0 0 1 0 18.88768z m75.49952 0a9.472 9.472 0 0 1-9.44128-9.45664 9.472 9.472 0 0 1 9.44128-9.43104c5.1968 0 9.44128 4.23936 9.44128 9.43104a9.472 9.472 0 0 1-9.44128 9.45664z m75.50976 0a9.45152 9.45152 0 0 1 0-18.88768 9.4464 9.4464 0 0 1 0 18.88768z"
        fill="#464646"
        p-id="1158"
      ></path>
      <path
        d="M484.76672 897.6384h0.34816v-124.59008H123.25376v124.59008h361.31328z"
        fill="#686868"
        p-id="1159"
      ></path>
      <path
        d="M446.04928 580.93568c5.1968 0 9.4208-4.2496 9.4208-9.45664V250.58304a9.472 9.472 0 0 0-9.4208-9.42592H162.8928a9.45664 9.45664 0 0 0-9.44128 9.42592v320.896a9.472 9.472 0 0 0 9.44128 9.45664h283.15648zM181.98528 282.68032c0-5.19168 4.23424-9.43104 9.43104-9.43104h226.10432c5.20192 0 9.43616 4.23936 9.43616 9.43104v32.08704a9.472 9.472 0 0 1-9.43616 9.45152H191.41632a9.46176 9.46176 0 0 1-9.43104-9.45152v-32.08704z m0 75.50464c0-5.19168 4.23424-9.41056 9.43104-9.41056h226.10432c5.20192 0 9.43616 4.23424 9.43616 9.41056v32.09216c0 5.21728-4.2496 9.43616-9.43616 9.43616H191.41632a9.43616 9.43616 0 0 1-9.43104-9.43616v-32.09216z m0 75.51488c0-5.20192 4.23424-9.42592 9.43104-9.42592h226.10432c5.20192 0 9.43616 4.22912 9.43616 9.42592v32.09216c0 5.18656-4.2496 9.4208-9.43616 9.4208H191.41632a9.44128 9.44128 0 0 1-9.43104-9.4208v-32.09216z m235.53536 117.03808H191.41632a9.4464 9.4464 0 0 1-9.43104-9.44128v-32.08704c0-5.21728 4.23424-9.45152 9.43104-9.45152h226.10432c5.20192 0 9.43616 4.23424 9.43616 9.45152v32.08704a9.46176 9.46176 0 0 1-9.43616 9.44128z"
        fill="#1E1D1D"
        p-id="1160"
      ></path>
      <path
        d="M191.41632 324.21888h226.10432a9.472 9.472 0 0 0 9.43616-9.45152v-32.08704a9.45152 9.45152 0 0 0-9.43616-9.43104H191.41632a9.4464 9.4464 0 0 0-9.43104 9.43104v32.08704c0 5.1968 4.23424 9.45152 9.43104 9.45152zM191.41632 399.70816h226.10432a9.4464 9.4464 0 0 0 9.43616-9.43616v-32.09216a9.4464 9.4464 0 0 0-9.43616-9.41056H191.41632a9.43104 9.43104 0 0 0-9.43104 9.41056v32.09216c0 5.21728 4.23424 9.43616 9.43104 9.43616zM191.41632 475.2128h226.10432a9.45152 9.45152 0 0 0 9.43616-9.4208v-32.09216a9.44128 9.44128 0 0 0-9.43616-9.42592H191.41632a9.43616 9.43616 0 0 0-9.43104 9.42592v32.09216c0 5.18656 4.23424 9.4208 9.43104 9.4208zM426.9568 541.312v-32.09216a9.45664 9.45664 0 0 0-9.43616-9.45152H191.41632a9.4464 9.4464 0 0 0-9.43104 9.45152v32.09216c0 5.1968 4.23424 9.43104 9.43104 9.43104h226.10432a9.46176 9.46176 0 0 0 9.43616-9.43104z"
        fill="#7F7E7E"
        p-id="1161"
      ></path>
      <path
        d="M191.21152 602.65472a9.4464 9.4464 0 0 0 0 18.88768 9.4464 9.4464 0 0 0 0-18.88768z"
        fill="#ABB7B7"
        p-id="1162"
      ></path>
      <path
        d="M266.7264 602.65472a9.45664 9.45664 0 0 0-9.44128 9.43104 9.46176 9.46176 0 0 0 9.44128 9.45664 9.4464 9.4464 0 0 0 0-18.88768z"
        fill="#00B16A"
        p-id="1163"
      ></path>
      <path
        d="M342.22592 602.65472a9.472 9.472 0 0 0-9.44128 9.43104 9.472 9.472 0 0 0 9.44128 9.45664 9.472 9.472 0 0 0 9.44128-9.45664 9.45664 9.45664 0 0 0-9.44128-9.43104z"
        fill="#F22613"
        p-id="1164"
      ></path>
      <path
        d="M427.17696 612.08576a9.4464 9.4464 0 1 0-9.44128 9.45664 9.46176 9.46176 0 0 0 9.44128-9.45664z"
        fill="#E9D460"
        p-id="1165"
      ></path>
      <path
        d="M654.98112 755.67616m-251.25376 0a251.25376 251.25376 0 1 0 502.50752 0 251.25376 251.25376 0 1 0-502.50752 0Z"
        fill="#FFFFFF"
        p-id="1166"
      ></path>
      <path
        d="M431.0784 810.84928l0.01536-77.5424s0.33792-13.64992 14.47424-7.54176l60.2112 58.96192 0.33792-48.8192s-1.15712-13.08672 12.38016-11.16672c0 0 6.8096 2.90816 6.54336 8.37632l0.38912 74.42944s-0.14336 14.56128-14.29504 10.08128l-60.49792-60.0576-0.05632 52.44416s-1.33632 9.2672-11.10016 8.44288c0.0256 0.01024-6.05696-1.13152-8.40192-7.60832zM632.51968 759.36256l-14.67392-35.22048-56.704 0.30208-24.71936 45.0304s-2.61632 2.57024-0.04096 5.07904l22.76352 40.45824s1.33632 3.32288 3.30752 3.32288h52.04992s1.15712 0.66048 2.1504-1.80736l23.97696-49.05984-56.25856 0.1792s-10.10688 1.65376-8.79104 12.06784c0 0 2.66752 7.296 8.79104 7.296l22.37952-0.17408s4.04992-0.32256 1.77664 2.08384l-5.07904 10.0096-28.67712 0.06656s-2.66752 0.48128-3.49184-2.18112l-13.19424-23.0912s-1.36192-2.48832 0.07168-3.61984l13.12256-23.48032s0.82944-3.97824 4.15232-2.65216l25.8304-0.0768s4.80256-0.82944 6.12864 3.51744l5.55008 11.60192s0.32256 0.52224 1.44384 0.69632l18.13504-0.34816zM652.66176 759.81824l14.8224-0.07168s2.49856 0.20992 2.88256-1.26976l-0.0256-23.0656s0.65024-10.96704-11.15136-10.8544c0 0-7.21408 0.97792-8.33536 9.088v24.71424c0-0.01024-0.39424 1.48992 1.80736 1.4592zM652.46208 767.54944h15.67744s2.11968-0.83456 2.11968 2.24256v38.02112s0.98304 7.38304-7.64416 10.34752c0 0-6.912 1.57696-11.24864-5.86752 0 0-0.87552-3.11296-0.768-6.33856v-34.78016c-0.02048-0.0256-0.6144-4.23424 1.86368-3.62496zM682.05056 734.75072s-0.16896-9.86624 10.47552-10.27584c0 0 6.78912 0.09728 8.64256 7.43424l0.128 52.4288s-0.512 1.99168 1.61792 0l55.808-56.192s6.08256-5.94944 12.76928-2.22208c0 0 4.57728 1.81248 4.5312 9.728l0.06656 73.15968s0.51712 8.68352-9.78432 9.56416c0 0-7.33184 0.60928-9.18016-6.94272L756.87936 757.76l-58.78272 58.47552s-7.57248 5.52448-14.1824-1.17248c0 0-2.6112-2.3808-1.99168-10.46016l0.128-69.85216zM820.36224 772.39808l-27.83232 27.8272s-9.82016 7.48032-0.75776 16.3072c0 0 7.1424 4.41344 12.65152-0.72704l28.24704-28.12416s2.36544-4.1984 5.22752 0.36352l27.84256 27.8528s8.45312 6.83008 15.26272-2.36032c0 0 2.85696-5.28896-0.57344-10.15808l-30.21312-30.44864s-2.2272-1.43872 0.0512-2.70848l30.6432-31.47776s5.08928-7.21408-3.7632-13.04064c0 0-6.55872-3.36384-13.76256 3.48672l-26.35776 26.09664s-2.07872 2.92864-3.21024 0.83968l-30.14656-29.24032s-7.6544-6.14912-14.22336 1.8944c0 0-4.06016 6.8864 1.38752 12.27264l29.64992 29.56288c-0.01024 0.01536 1.48992 1.05472-0.12288 1.78176z"
        fill="#009800"
        p-id="1167"
      ></path>
    </svg>
    <div class="c-gateway__content">
      <div class="c-gateway__content__title">{{ title }}</div>
      <div class="c-gateway__content__text">{{ text }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.c-gateway {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid #5f95ff;
  background-color: rgba(95, 149, 255, 0.05);
  &__svg {
    max-width: 64px;
    max-height: 64px;
  }
  &__content {
    flex: 1;
    &__title {
      font-size: 16px;
      color: #0e1215;
      font-weight: 600;
    }
    &__text {
      font-size: 12px;
      color: #6c757d;
    }
  }
}
</style>
